<template>
    <view class="auth-container" v-if="!this.userStore.isLogin">
        <view class="auth-header">
            <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
            <view class="title">智慧药箱</view>
            <view class="subtitle">授权登录后体验更多功能</view>
        </view>
        
        <view class="auth-content">
            <view class="auth-tips">
                <view class="tip-item">
                    <uni-icons type="checkmarkempty" size="20" color="#2ac2d1"></uni-icons>
                    <text class="tip-text">查看药品详情</text>
                </view>
                <view class="tip-item">
                    <uni-icons type="checkmarkempty" size="20" color="#2ac2d1"></uni-icons>
                    <text class="tip-text">创建药品组合</text>
                </view>
                <view class="tip-item">
                    <uni-icons type="checkmarkempty" size="20" color="#2ac2d1"></uni-icons>
                    <text class="tip-text">设置用药提醒</text>
                </view>
            </view>
        </view>
        
        <view class="auth-footer">
            <button class="auth-btn" type="primary" @click="handleLogin">微信一键登录</button>
            <view class="privacy-policy">
                登录即代表您已同意
                <text class="link" >《用户协议和隐私政策》</text>
            </view>
        </view>
    </view>
    <view class="auth-container" v-else>
        <view class="user-info">
            <!-- 头像区域 -->
            <view class="avatar-section">
                <image class="avatar" :src="this.userStore.userNextInfo.avatar || '/static/default-avatar.png'" mode="aspectFill" @click="handleEditAvatar"></image>
                <view class="edit-icon">
                    <uni-icons type="camera-filled" size="20" color="#fff"></uni-icons>
                </view>
            </view>
            
            <!-- 用户信息列表 -->
            <view class="info-list">
                <!-- 昵称 -->
                <view class="info-item">
                    <view class="item-label">
                        <text>昵称</text>
                    </view>
                    <view class="item-content">
                        <input 
                            type="text"
                            v-model="this.userStore.userNextInfo.name"
                            @blur="handleChangeUserInfo"
                            placeholder="设置昵称"
                        />
                        <uni-icons type="right" size="16" color="#999"></uni-icons>
                    </view>
                </view>
                
                <!-- 手机号 -->
                <view class="info-item">
                    <view class="item-label">
                        <text>手机号</text>
                    </view>
                    <view class="item-content">
                        <text v-if="this.userStore.userNextInfo.phone">{{formatPhone(this.userStore.userNextInfo.phone)}}</text>
                        <text v-else class="placeholder">未绑定</text>
                        <button 
                            v-if="!this.userStore.userNextInfo.phone"
                            class="bind-phone-btn" @click="goBindInfo('phone')"
                        >绑定手机号</button>
                        <uni-icons type="right" size="16" color="#999"></uni-icons>
                    </view>
                </view>
                <!-- 身份证号 -->
                <view class="info-item">
                    <view class="item-label">
                        <text>身份证号</text>
                    </view>
                    <view class="item-content">
                        <text v-if="this.userStore.userNextInfo.idNumber">{{maskIDCard(this.userStore.userNextInfo.idNumber)}}</text>
                        <text v-else class="placeholder">未绑定</text>
                        <button 
                            v-if="!this.userStore.userNextInfo.idNumber"
                            class="bind-phone-btn" @click="goBindInfo('idCard')"
                        >绑定身份证号</button>
                        <uni-icons type="right" size="16" color="#999"></uni-icons>
                    </view>
                </view>
                
                <view class="info-item">
                    <view class="item-label">
                        <text>性别</text>
                    </view>
                    <view class="item-content">
                        <input 
                            type="text"
                            v-model="this.userStore.userNextInfo.sex"
                            @blur="handleChangeUserInfo"
                            placeholder="设置性别"
                        />
                        <uni-icons type="right" size="16" color="#999"></uni-icons>
                    </view>
                </view>
            </view>
            
            <!-- 退出登录按钮 -->
            <view class="logout-section">
                <button class="logout-btn" @click="handleLogout">退出登录</button>
            </view>
        </view>
    </view>
</template>

<script>
import navigator from '@/utils/navigator';
import { useUserStore } from '../../store/user';
import { uploadFile } from '@/api/commonHttp'
import { useMedicineStore } from '@/store/medicine';
export default {
    data() {
        return {
        }
    },
    setup() {
        const userStore = useUserStore()
        const medicineStore = useMedicineStore();
        return {
          medicineStore,
          userStore
        }
    },
    onLoad() {
      // this.handleLogin()
    },
    methods: {
        // 修改个人信息
        handleChangeUserInfo() {
            this.userStore.changeUserBaseInfo()
        },
        goBindInfo(name){
          uni.navigateTo({
            url:`/subpkgDetail/userBindDetail/userBindDetail?name=${name}`
          })
        },
        // 执行登录方法
        async handleLogin() {
            try {
                const res = await uni.login({ provider: 'weixin' })
                await this.userStore.fetchUserInfo(res.code) // 等待 fetchUserInfo 完成
                setTimeout(() => {
                    this.userInfo = this.userStore.userNextInfo
                    if (this.userInfo.sex === '1') {
                        this.userInfo.sex = '男';
                    } else if (this.userInfo.sex === '0') {
                        this.userInfo.sex = '女';
                    }
                }, 500)
            } catch (error) {
                console.error('Login failed:', error)
            } finally {
                this.loading = false
            }
            if(this.userStore.isLogin){
              this.medicineStore.getMedicineList()
            }
        },
        
        // 格式化手机号
        formatPhone(phone) {
            return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
        },

        maskIDCard(idCard) {
            return idCard.slice(0, 3) + '*'.repeat(11) + idCard.slice(-4);
        },
        
        // 退出登录
        handleLogout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.userStore.logout()
                        uni.showToast({
                            title: '已退出登录',
                            icon: 'success'
                        })
                    }
                }
            })
        },

        // 处理点击头像事件
         handleEditAvatar() {
            uni.showActionSheet({
                itemList: ['从相册选择', '拍照'],
                success: (res) => {
                    if (res.tapIndex === 0) {
                        // 从相册选择
                        uni.chooseImage({
                            count: 1,
                            success: async (chooseRes) => {
                                const tempFilePaths = chooseRes.tempFilePaths
                                // 这里可以调用上传图片的接口，将图片上传到服务器
                                const userAvatarNewUrl = await uploadFile(tempFilePaths[0])
                                // 更新用户信息中的头像路径
                                this.userStore.userNextInfo.avatar = JSON.parse(userAvatarNewUrl).data
                                // 调用修改用户信息的方法
                                this.handleChangeUserInfo()
                            }
                        })
                    } else if (res.tapIndex === 1) {
                        // 拍照
                        uni.chooseImage({
                            count: 1,
                            sourceType: ['camera'],
                            success:async (chooseRes) => {
                                const tempFilePaths = chooseRes.tempFilePaths
                                // 这里可以调用上传图片的接口，将图片上传到服务器
                                const userAvatarNewUrl = await uploadFile(tempFilePaths[0])
                                // 更新用户信息中的头像路径
                                this.userStore.userNextInfo.avatar = JSON.parse(userAvatarNewUrl).data
                                // 调用修改用户信息的方法
                                this.handleChangeUserInfo()
                            }
                        })
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss">
.auth-container {
    min-height: 100vh;
    height: 100vh;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    box-sizing: border-box;
    
    .auth-header {
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40rpx 0;
        
        .logo {
            width: 140rpx;
            height: 140rpx;
            margin-bottom: 20rpx;
        }
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 16rpx;
        }
        
        .subtitle {
            font-size: 28rpx;
            color: #666;
        }
    }
    
    .auth-content {
        flex: 1;
        display: flex;
        align-items: center;
        
        .auth-tips {
            width: 100%;
            margin: 0;
            
            .tip-item {
                display: flex;
                align-items: center;
                margin-bottom: 30rpx;
                
                &:last-child {
                    margin-bottom: 0;
                }
                
                .tip-text {
                    font-size: 28rpx;
                    color: #333;
                    margin-left: 20rpx;
                }
            }
        }
    }
    
    .auth-footer {
        flex: none;
        padding: 40rpx 0;
        
        .auth-btn {
            background-color: #2ac2d1;
            border: none;
            
            &::after {
                border: none;
            }
            
            &.button-hover {
                background-color: #24a8b5;
            }
        }
        
        .privacy-policy {
            font-size: 24rpx;
            color: #999;
            text-align: center;
            margin-top: 20rpx;
            
            .link {
                color: #2ac2d1;
            }
        }
    }
    
    .user-info {
        padding: 20rpx;
        
        .avatar-section {
            position: relative;
            width: 160rpx;
            height: 160rpx;
            margin: 40rpx auto;
            
            .avatar {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #f5f5f5;
            }
            
            .edit-icon {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 48rpx;
                height: 48rpx;
                background-color: rgba(0, 0, 0, 0.6);
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        
        .info-list {
            margin-top: 40rpx;
            background-color: #fff;
            border-radius: 12rpx;
            
            .info-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 30rpx;
                border-bottom: 2rpx solid #f5f5f5;
                
                &:last-child {
                    border-bottom: none;
                }
                
                .item-label {
                    color: #333;
                    font-size: 28rpx;
                }
                
                .item-content {
                    flex: 1;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    
                    input {
                        text-align: right;
                        margin-right: 20rpx;
                    }
                    
                    .placeholder {
                        color: #999;
                        margin-right: 20rpx;
                    }
                    
                    .bind-phone-btn {
                        margin: 0 20rpx;
                        padding: 0 20rpx;
                        height: 56rpx;
                        line-height: 56rpx;
                        font-size: 24rpx;
                        color: #2ac2d1;
                        background: rgba(42, 194, 209, 0.1);
                        border-radius: 28rpx;
                        
                        &::after {
                            border: none;
                        }
                    }
                }
            }
        }
        
        .logout-section {
            margin-top: 60rpx;
            padding: 0 40rpx;
            
            .logout-btn {
                width: 100%;
                height: 88rpx;
                line-height: 88rpx;
                text-align: center;
                background-color: #fff;
                color: #ff4d4f;
                border-radius: 44rpx;
                font-size: 32rpx;
                
                &::after {
                    border: none;
                }
                
                &.button-hover {
                    background-color: #f5f5f5;
                }
            }
        }
    }
}
</style>